{% extends 'base.html' %}
{% load static %}

{% block title %}欢迎 - AI故事生成系统{% endblock %}

{% block extra_css %}
<style>
    .hero-section {
        background: linear-gradient(to right, #4e73df, #224abe);
        color: white;
        padding: 3rem 0;
        border-radius: 15px;
        margin-bottom: 2rem;
    }
    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        color: #4e73df;
    }
    .card-hover:hover {
        transform: translateY(-5px);
        transition: transform 0.3s ease;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    .cta-section {
        background-color: #f8f9fa;
        padding: 3rem 0;
        border-radius: 15px;
        margin: 2rem 0;
    }
    .testimonial {
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<!-- 英雄区域 -->
<div class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-7">
                <h1 class="display-4 fw-bold mb-4">用AI释放你的创作潜力</h1>
                <p class="lead mb-4">欢迎来到AI故事生成系统，这是一个使用人工智能技术帮助您创作精彩故事的平台。无论您是专业作家还是写作爱好者，都能在这里找到灵感。</p>
                <div class="d-grid gap-2 d-sm-flex justify-content-sm-start">
                    <a href="{% url 'user:register' %}" class="btn btn-light btn-lg px-4 gap-3">
                        <i class="bi bi-person-plus"></i> 立即注册
                    </a>
                    <a href="{% url 'user:login' %}" class="btn btn-outline-light btn-lg px-4">
                        <i class="bi bi-box-arrow-in-right"></i> 登录
                    </a>
                </div>
            </div>
            <div class="col-md-5 d-none d-md-block">
                <img src="{% static 'admin/img/hero-image.svg' %}" class="img-fluid" alt="创作插图" onerror="this.onerror=null; this.src='{% static 'admin/img/tx.png' %}';">
            </div>
        </div>
    </div>
</div>

<div class="container">
    <!-- 特色功能 -->
    <div class="row mt-5">
        <div class="col-12 text-center mb-4">
            <h2>平台特色</h2>
            <p class="lead text-muted">探索AI故事生成系统的独特功能</p>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100 card-hover">
                <div class="card-body text-center">
                    <i class="bi bi-robot feature-icon"></i>
                    <h3 class="card-title">AI智能创作</h3>
                    <p class="card-text">使用先进的人工智能技术，帮助您快速生成故事创意和内容。可以根据您提供的关键词、主题或场景，自动生成完整的故事情节。</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100 card-hover">
                <div class="card-body text-center">
                    <i class="bi bi-people-fill feature-icon"></i>
                    <h3 class="card-title">社区互动</h3>
                    <p class="card-text">与其他创作者交流，分享经验，获得反馈，共同进步。您可以通过评论、点赞和收藏功能与其他用户互动，建立自己的粉丝群体。</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100 card-hover">
                <div class="card-body text-center">
                    <i class="bi bi-gear-fill feature-icon"></i>
                    <h3 class="card-title">个性化体验</h3>
                    <p class="card-text">根据您的喜好和创作风格，提供个性化的创作建议和指导。系统会学习您的创作习惯，推荐适合您的故事类型和写作技巧。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 如何工作 -->
    <div class="row mt-5">
        <div class="col-12 text-center mb-4">
            <h2>AI故事生成系统如何工作</h2>
            <p class="lead text-muted">简单四步，开启您的创作之旅</p>
        </div>
        <div class="col-md-3 mb-4 text-center">
            <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 80px; height: 80px;">
                <h3 class="mb-0">1</h3>
            </div>
            <h4>注册账号</h4>
            <p>创建您的个人账号，设置个人资料</p>
        </div>
        <div class="col-md-3 mb-4 text-center">
            <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 80px; height: 80px;">
                <h3 class="mb-0">2</h3>
            </div>
            <h4>选择模式</h4>
            <p>自由创作或AI辅助创作</p>
        </div>
        <div class="col-md-3 mb-4 text-center">
            <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 80px; height: 80px;">
                <h3 class="mb-0">3</h3>
            </div>
            <h4>编辑完善</h4>
            <p>修改和完善您的故事内容</p>
        </div>
        <div class="col-md-3 mb-4 text-center">
            <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 80px; height: 80px;">
                <h3 class="mb-0">4</h3>
            </div>
            <h4>分享交流</h4>
            <p>发布故事并与社区互动</p>
        </div>
    </div>

    <!-- 用户评价 -->
    <div class="row mt-5">
        <div class="col-12 text-center mb-4">
            <h2>用户评价</h2>
            <p class="lead text-muted">听听他们怎么说</p>
        </div>
        <div class="col-md-4 mb-4">
            <div class="testimonial">
                <div class="d-flex align-items-center mb-3">
                    <img src="{% static 'admin/img/tx.png' %}" alt="User" class="rounded-circle me-3" width="60" height="60">
                    <div>
                        <h5 class="mb-0">李雯</h5>
                        <p class="text-muted mb-0">自由撰稿人</p>
                    </div>
                </div>
                <p class="mb-0">"AI故事生成系统极大地提高了我的创作效率。当我遇到写作瓶颈时，AI的建议总能给我带来新的灵感。这是每个创作者的必备工具！"</p>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="testimonial">
                <div class="d-flex align-items-center mb-3">
                    <img src="{% static 'admin/img/tx.png' %}" alt="User" class="rounded-circle me-3" width="60" height="60">
                    <div>
                        <h5 class="mb-0">陈明</h5>
                        <p class="text-muted mb-0">网络小说作家</p>
                    </div>
                </div>
                <p class="mb-0">"作为一名职业作家，我需要不断产出优质内容。这个平台帮助我快速构建故事框架，并提供了丰富的情节建议，大大缩短了我的创作周期。"</p>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="testimonial">
                <div class="d-flex align-items-center mb-3">
                    <img src="{% static 'admin/img/tx.png' %}" alt="User" class="rounded-circle me-3" width="60" height="60">
                    <div>
                        <h5 class="mb-0">王小红</h5>
                        <p class="text-muted mb-0">大学生</p>
                    </div>
                </div>
                <p class="mb-0">"我一直想写故事但不知道从何下手。这个平台不仅提供了AI创作辅助，还有一个友好的社区，让我学到了很多写作技巧，收获了很多朋友。"</p>
            </div>
        </div>
    </div>

    <!-- 行动召唤 -->
    <div class="cta-section text-center">
        <h2 class="mb-4">准备好开始您的创作之旅了吗？</h2>
        <p class="lead mb-4">加入AI故事生成系统，探索无限创意可能！</p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <a href="{% url 'user:register' %}" class="btn btn-primary btn-lg px-4 gap-3">立即免费注册</a>
            <a href="{% url 'user:login' %}" class="btn btn-outline-secondary btn-lg px-4">已有账号？立即登录</a>
        </div>
    </div>

    <!-- 常见问题 -->
    <div class="row mt-5 mb-5">
        <div class="col-12 text-center mb-4">
            <h2>常见问题</h2>
        </div>
        <div class="col-md-6 mb-4">
            <h5>使用AI创作的故事版权归谁所有？</h5>
            <p>使用我们平台创作的所有内容版权均归创作者所有。AI只是一个创作辅助工具，最终成果的知识产权归您。</p>
        </div>
        <div class="col-md-6 mb-4">
            <h5>我需要有写作经验才能使用吗？</h5>
            <p>不需要。无论您是经验丰富的作家还是完全的新手，我们的平台都能满足您的需求，AI会根据您的水平提供适当的辅助。</p>
        </div>
        <div class="col-md-6 mb-4">
            <h5>AI生成的内容质量如何？</h5>
            <p>我们使用最先进的AI模型，能够生成高质量、连贯的故事内容。当然，AI仍需要人类的创意指导和修改完善。</p>
        </div>
        <div class="col-md-6 mb-4">
            <h5>使用这个平台需要付费吗？</h5>
            <p>基础功能完全免费。我们也提供高级功能的付费计划，为专业创作者提供更强大的工具和更多的创作资源。</p>
        </div>
    </div>
</div>
{% endblock %} 